<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-待办列表.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #ccc;
      }

      ul {
        list-style: none;
      }

      li {
        padding: 20px;
        text-align: left;
        font-size: 30px;
        border-bottom: 1px dashed #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      li input {
        margin-right: 10px;
      }

      li button {
        display: none;
        padding: 5px;
      }

      li:hover button {
        display: inline-block;
        cursor: pointer;
      }

      .chk:checked + span {
        text-decoration: line-through;
      }

      h1 {
        margin-bottom: 10px;
      }

      .chk + span {
      }

      .box {
        background-color: #fff;
        width: 60vw;
        padding: 20px 20px 0;
        margin: 50px auto;
      }

      .box .tool input {
        width: 100%;
        height: 50px;
        text-indent: 20px;
        font-size: 20px;
        font-style: italic;
        color: #666;
        font-weight: 700;
      }

      section {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      a {
        text-decoration-color: #666;
        color: inherit;
      }
    </style>
  </head>

  <body>
    <div id="app" data-v-app="">
      <div class="box">
        <h1>待办列表</h1>
        <div class="tool">
          <input
            id="word"
            autofocus=""
            type="text"
            placeholder="请输入代办事项"
          />
        </div>
        <ul></ul>
        <section>
          <span><i>1</i> 未完成</span><a href="#">清理 <b>0</b> 已完成</a>
        </section>
      </div>
    </div>
    <script>
      let life = [];
      const word = document.querySelector("#word");
      const ul = document.querySelector("ul");

      // 渲染业务
      function render() {
        newArr = JSON.parse(localStorage.getItem("life"));
        const noEnd = document.querySelector("span i");

        noEnd.innerHTML = newArr.length;

        let str = newArr.map(function (item, index) {
          return `<li>
            <div>
              <input type="checkbox" />
              <span class="false">${item.the}</span>
            </div>
            <button id="${index}">X</button>
          </li>`;
        });

        ul.innerHTML = str.join("");
      }

      render();

      // 添加业务
      word.addEventListener("change", function (e) {
        console.log(111);
        let arr = {
          the: word.value,
        };
        life.push(arr);
        word.value = "";
        localStorage.setItem("life", JSON.stringify(life));

        render();
      });

      // 删除业务
      ul.addEventListener("click", function (e) {
        if (e.target.tagName === "BUTTON") {
          if (!confirm("确定删除数据吗")) {
            return;
          }

          life.splice(e.target.dataset.id, 1);

          localStorage.setItem("life", JSON.stringify(life));
          render();
        }
      });
    </script>
  </body>
</html>
